<template>
  <div class="container">
    <!-- pageStart -->
    <headers title="添加时段" />
    <top title="添加时段" />

    <div class="cont">
      <div v-for="(temp, index) in listNum" :key="index" class="list">
        <div class="prise">选择时段 </div>
        <div class="type">
          {{ temp.value || '' }}
          <img
            :style="temp.value&&'pointer-events: none;'"
            src="@/assets/select.png"
            class="select"
            @click="showPickerHandler(index)"
          >
          <!-- @click="showPickerHandler(index)" -->
        </div>
      </div>

      <div class="list add" @click="listNum.push({})">
        <div class="type">
          <img src="@/assets/add.png" class="add-btn">
        </div>
        <div class="add-wz">添加时段</div>
      </div>

      <div class="list add">
        <div class="type">
          <!-- <img src="@/assets/add.png" class="add-btn"> -->
        </div>
        <div class="add-wz">共选择{{ bufferDays.length }}天 总金额 {{ mivaAmount }} ￥</div>
      </div>

      <div class="next-btn" @click="submit(`partner`)">完成,去支付</div>
      <div class="back" @click="routerLink(`home`)">上一步</div>
    </div>
    <!--  时间段picker -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        v-if="mivaShow"
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <!-- pageEnd -->
  </div>
</template>
<script>
import { Toast } from 'vant'
import headers from '@/components/header'
import top from '@/components/top'
import { prizeValuation, businessPrizeSetting, businessPay } from '@/api/miva'
export default {
    components: {
        headers: headers,
        top: top
    },
    data() {
        return {
            mivaShow: true,
            mivaAmount: 0,
            listNum: [{}],
            value: '2019-09-27',
            showPicker: false,
            columns: [],
            reqData: [],
            mivaColumns: [],
            checked: false,
            nowEdit: 0,
            baseInfo: {},
            bufferDays: []
        }
    },
    created() {
        prizeValuation().then(res => {
            this.reqData = res.data
            for (var i = 0; i < res.data.length; i++) {
                this.columns.push(
                    `[ ${res.data[i].days} ] 金额 ${res.data[i].amount}￥`
                )
            }
        })
    },
    methods: {
        submit() {
            this.baseInfo['day'] = this.bufferDays.length
            this.baseInfo['definite_day'] = this.bufferDays.toString()
            this.baseInfo['amount'] = this.mivaAmount
            this.baseInfo = { ...this.$store.state.lastData, ...this.baseInfo }
            console.log(this.baseInfo)
            // alert(JSON.stringify(this.baseInfo))
            businessPrizeSetting(this.baseInfo).then(res_setting => {
                // alert(JSON.stringify(res_setting))
                if (res_setting.code === 0) {
                    Toast({ type: 'danger', message: res_setting.data })
                    this.$router.back()
                    return
                }
                businessPay({
                    out_trade_no: res_setting.data.out_trade_no,
                    amount: this.mivaAmount
                }).then(res_pay => {
                    // alert(JSON.stringify(res_pay))
                    // 调用支付api注册方法
                    this.isBridgeReady(res_pay.data.data)
                })
            })
        },
        // 支付api注册方法
        isBridgeReady(res_pay) {
            const { onBridgeReady } = this
            if (typeof WeixinJSBridge === 'undefined') {
                if (document.addEventListener) {
                    document.addEventListener(
                        'WeixinJSBridgeReady',
                        onBridgeReady,
                        false
                    )
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
                }
            } else {
                onBridgeReady(res_pay)
            }
        },
        // 支付处理器
        onBridgeReady(res_pay) {
            // alert(JSON.stringify(res_pay))
            console.log('支付处理器')
            // const { appId, nonceStr, sign, signType, timeStamp } = res_pay
            const params = {
                appId: res_pay.appId, // 公众号名称，由商户传入
                timeStamp: res_pay.timeStamp.toString(), // 时间戳，自1970年以来的秒数
                nonceStr: res_pay.nonceStr, // 随机串
                package: res_pay.package,
                signType: res_pay.signType, // 微信签名方式：
                paySign: res_pay.sign // 微信签名
            }
            console.log(params)
            // alert(JSON.stringify(params))
            WeixinJSBridge.invoke('getBrandWCPayRequest', params, res => {
                // alert(JSON.stringify(res))
                if (res.err_msg === 'get_brand_wcpay_request:ok') {
                    Toast({ type: 'danger', message: '支付成功' })
                    this.routerLink(`partner`)
                } else {
                    Toast({ type: 'danger', message: '支付未成功' })
                }
            })
        },
        onConfirm(value, index) {
            console.log(value, index)
            if (this.bufferDays.indexOf(this.reqData[index].days) !== -1) {
                console.log('不能再选了')
                Toast({ type: 'danger', message: '不能重复选择' })
                return
            }
            this.value = value
            this.showPicker = false
            this.listNum[this.nowEdit]['value'] = value
            this.listNum[this.nowEdit]['days'] = this.reqData[index].days
            this.listNum[this.nowEdit]['amount'] = this.reqData[index].amount
            this.bufferDays.push(this.reqData[index].days)
            this.mivaAmount += Number(this.reqData[index].amount)
            this.columns[index] = {}
            this.mivaShow = false
            this.mivaShow = true
            console.log(this.columns)
        },

        showPickerHandler(index) {
            this.nowEdit = index
            this.showPicker = true
        },
        routerLink(href) {
            this.$router.push({ name: href })
        }
    }
}
</script>
<style lang="less" scoped>
.container {
  width: 95%;
  margin: 0 auto;
  .header {
    width: 95%;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    span {
      padding-right: 10px;
    }
  }
  .top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    .icon {
      width: 50%;
      img {
        width: 100%;
      }
    }
    .wz {
      font-size: 23px;
      font-weight: bold;
    }
    .rule-btn {
      width: 5%;
      margin-top: -50px;
      img {
        width: 100%;
      }
    }
  }
  .cont {
    width: 100%;
    .list {
      border: 2px solid #487cfb;
      display: flex;
      justify-content: space-between;
      padding: 15px;
      margin: 15px 10px;
      border-radius: 6px;
    }
    .prise {
      font-size: 14px;
      color: #b6b6b6;
    }
    .type {
      font-size: 16px;
      font-weight: bold;
      color: #487cfb;
    }
    .num {
      font-size: 14px;
      color: #487cfb;
      .show {
        color: #b6b6b6;
        padding-left: 5px;
      }
    }
    .rule {
      width: 94%;
      height: 100px;
      padding: 5px;
      box-sizing: border-box;
    }
    .gz-wz {
      padding: 0px 10px;
      font-size: 14px;
      color: #b6b6b6;
    }
    .convert {
      justify-content: space-between;
      padding: 15px;
      box-sizing: border-box;
    }
    .select {
      width: 17px;
    }
    .next-btn {
      width: 95%;
      margin: 0 auto;
      padding: 15px 0;
      background: #487cfb;
      color: #fff;
      text-align: center;
      margin-bottom: 2%;
      font-size: 14px;
      border-radius: 6px;
    }
    .back {
      text-align: center;
      color: #487cfb;
      font-size: 14px;
    }
    .add {
      justify-content: center;
      align-items: center;
      vertical-align: middle;
      .add-btn {
        width: 20px;
        vertical-align: middle;
      }
      .add-wz {
        padding: 3px 5px 0;
      }
    }
  }
}
</style>
